<template>
  <div>
    <el-dialog 
      :title="userDialogTitle" 
      v-model="dialogShow" 
      width="500px" 
      :before-close="closeInfoDialog"
    >
      <!-- 查看模式 -->
      <div v-if="userDialogTitle === '查看'">
        <div class="user-info">
          <div class="info-row">
            <span class="label">用户姓名：</span>
            <span class="value">{{ currentUserInfo.name || '-' }}</span>
          </div>
        </div>
      </div>

      <!-- 编辑/新增模式 -->
      <div v-else>
        <el-form ref="userForm" :model="formData" :rules="formRules" label-width="120px" style="padding-right: 20px;">
          <el-form-item label="用户姓名：" prop="name">
            <el-input v-model="formData.name" placeholder="请输入" @keyup.enter.prevent></el-input>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeInfoDialog">{{ userDialogTitle === '查看' ? '关闭' : '取消' }}</el-button>
          <el-button v-if="userDialogTitle !== '查看'" type="primary" @click="confirmAction" :loading="submitLoading">
            {{ userDialogTitle === '编辑' ? '保存' : '确定' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { userApi } from '@/api/user.js';
import { ElMessage } from 'element-plus';

// 定义 props 和 emits
const emit = defineEmits(['refreshTable']);

// 响应式数据
const dialogShow = ref(false);
const userDialogTitle = ref('');
const submitLoading = ref(false);
const currentUserInfo = ref({});
const formData = reactive({
  name: ''
});
const formRules = reactive({
  name: [
    { required: true, message: '请输入用户姓名', trigger: 'blur' }
  ]
});

// 打开信息对话框
const openInfoDialog = (dialogInfo) => {
  userDialogTitle.value = dialogInfo.title;
  dialogShow.value = true;

  if (dialogInfo.title === '查看') {
    currentUserInfo.value = { ...dialogInfo.userInfo };
  } else if (dialogInfo.title === '编辑') {
    currentUserInfo.value = { ...dialogInfo.userInfo };
    formData.name = dialogInfo.userInfo.name || '';
  } else if (dialogInfo.title === '添加') {
    formData.name = '';
  }
};

// 关闭信息对话框
const closeInfoDialog = () => {
  dialogShow.value = false;
  userDialogTitle.value = '';
  currentUserInfo.value = {};
  formData.name = '';
  if (userForm.value) {
    userForm.value.resetFields();
  }
};

// 确认操作
const confirmAction = async () => {
  if (!userForm.value) return;
  
  const valid = await userForm.value.validate();
  if (valid) {
    submitLoading.value = true;
    try {
      let params = {
        ...formData,
      };

      if (userDialogTitle.value === '编辑') {
        params.id = currentUserInfo.value.id;
        const [err, res] = await userApi.updateUser(params);
        if (err) return;
        ElMessage.success('编辑成功');
      } else {
        const [err, res] = await userApi.addUser(params);
        if (err) return;
        ElMessage.success('添加成功');
      }
      
      closeInfoDialog();
      emit('refreshTable'); // 刷新表格
    } catch (error) {
      console.error('操作失败:', error);
      ElMessage.error('操作失败');
    } finally {
      submitLoading.value = false;
    }
  }
};

// 表单引用
const userForm = ref();

// 暴露方法给父组件
defineExpose({
  openInfoDialog
});
</script>

<style lang="scss" scoped>
.user-info {
  .info-row {
    display: flex;
    margin-bottom: 16px;
    line-height: 32px;

    .label {
      width: 100px;
      color: #606266;
      text-align: right;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .value {
      color: #303133;
      flex: 1;
    }
  }
}

.dialog-footer {
  text-align: right;
}

/* 表单组件样式统一 - 右边组件字体放大与左边label一致 */
:deep(.el-form-item__label) {
  font-size: 16px;
  color: #606266;
}

:deep(.el-input__inner) {
  font-size: 16px;
  color: #222;
}

:deep(.el-radio__label) {
  font-size: 16px;
  color: #222;
}

/* 确保dialog使用Element Plus原生样式 */
:deep(.el-dialog) {
  background: #fff !important;
  color: #606266 !important;
  border-radius: 8px !important;
}

:deep(.el-dialog__header) {
  background: #fff !important;
  color: #303133 !important;
}

:deep(.el-dialog__title) {
  color: #303133 !important;
}

:deep(.el-dialog__body) {
  background: #fff !important;
  color: #606266 !important;
}

:deep(.el-dialog__footer) {
  background: #fff !important;
}
</style>